<template>
    <!-- 顶部左侧静态 -->
    <el-icon style="margin-left: 10px; margin-right: 10px; cursor: pointer" @click="changeIcon">
        <component :is="sidebarHidden ? 'Fold' : 'Expand'"></component>
    </el-icon>
    <!-- 左侧面包屑 -->
    <el-breadcrumb separator="/">
        <!-- 面包动态展示路由名字与标题 -->
        <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index" v-show="item.meta.title"
            :to="item.path">
            <!-- 面包屑展示匹配路由的标题 -->
            <span>{{ item.meta.title }}</span>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>
<script setup lang="ts" name="Breadcrumb">
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import { useLayoutStore } from '@/store/layout'
const layoutStore = useLayoutStore()

// 计算属性
const sidebarHidden = computed(() => layoutStore.layoutSettings.sidebarHidden)


let $route = useRoute()
const changeIcon = () => {
    layoutStore.toggleSidebar()
}
</script>
